<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-25 13:46:43
 * @LastEditors: 迷洛洛ywc
 * @LastEditTime: 2024-05-24 17:48:49
 * @FilePath: /tea-garden-web/src/pages/overview/subject-weather.vue
 * @Description: 专题-气象灾害
-->
<template>
  <div class="subject-weather">
    <div class="content">
      <i
        class="icon-button-back"
        @click="$router.push({ name: 'baseOverview' })"
      />
      <div class="module-name">气象灾害</div>
      <div class="subject-content">
        <div class="tit">
          <div class="name">24小时温度预测</div>
          <div class="time">{{ weatherData.time }}</div>
        </div>
        <weatherEcharts></weatherEcharts>
        <div class="detailBox">
          <div class="detailTit">霜冻风险</div>
          <span style="white-space: pre-wrap">{{
            weatherContent.tit
          }}</span>
        </div>
        <div class="detailBox">
          <div class="detailTit">防霜冻措施</div>
          <span style="white-space: pre-wrap">{{
            weatherContent.content
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import moment from 'moment'
import { get } from '@/util/http.js'
import weatherEcharts from '@/components/component-weatherEcharts.vue'
export default {
  data () {
    return {
      // weatherData: {
      //   id: 9,
      //   results: '预警：茶饼病可能爆发！请采取相应防治措施。',
      //   time: '2024-09-10',
      //   // suggest: '-1.<b>农业防治</b><br/>-除草：勤除杂草，改善通风透光性，降低湿度。\n-合理施肥：适当增施磷钾肥，提高茶树抗病力。\n-分批多次采摘：尽量少留嫩梢、嫩叶，以减少侵染机会。\n-摘除病叶：彻底摘除病叶和有病的新梢， 可以减少再次侵染的菌源。\n-2.药剂防治\n-加强气象预测预报：在病害流行期间，如果连续5天每天上午平均日照数少于3小时，或日降雨量在3~5mm以上，应发出预报，进行喷药防治。\n-药剂防治上以喷施铜素、汞素和有机硫杀菌剂为主，耐雨水冲刷\n-对历年发病较重的茶园，早春开采前或秋季采茶结束后喷0.6~0.7%石灰',
      //   suggest: '-1.农业防治-\n除草：勤除杂草，改善通风透光性，降低湿度。\n-合理施肥：适当增施磷钾肥，提高茶树抗病力。\n-分批多次采摘：尽量少留嫩梢、嫩叶，以减少侵染机会。\n-摘除病叶：彻底摘除病叶和有病的新梢， 可以减少再次侵染的菌源。\n-2.药剂防治\n-加强气象预测预报：在病害流行期间，如果连续5天每天上午平均日照数少于3小时，或日降雨量在3~5mm以上，应发出预报，进行喷药防治。\n-药剂防治上以喷施铜素、汞素和有机硫杀菌剂为主，耐雨水冲刷\n-对历年发病较重的茶园，早春开采前或秋季采茶结束后喷0.6~0.7%石灰',
      //   picture: '1' // 图片
      // }
      weatherData: {},
      weatherContent: {}
    }
  },
  watch: {},
  computed: {},
  components: {
    weatherEcharts
  },
  methods: {
    // 获取列表信息
    async getList () {
      const { data } = await get({ url: '/damageforecast/list' })
      console.log(data)
      this.weatherData = data[0]
      const text = this.weatherData.suggestion
      // 分割第一句和剩余内容
      const sentences = text.split(/。(?!$)/)
      const firstSentence = sentences[0]
      const remainingContent = sentences.slice(1).join('。')

      // 构建 weatherData 对象
      this.weatherContent = {
        tit: firstSentence,
        content: remainingContent
      }
    },
    async getWeatherHourList () {
      const res = await get({ url: '/weatherhour/list' })
      const hoursWeather = JSON.parse(res[0].json).hours
      console.log(hoursWeather)
    }
  },
  created () {},
  mounted () {
    this.getList()
    this.getWeatherHourList()
  }
}
</script>

<style lang="scss">
@mixin top {
  .icon-button-back {
    position: absolute;
    left: 16px;
    top: 18.5px;
    width: 22.5px;
    height: 22.5px;
    background-image: url("/public/image/common/icon-button-back-02.png");
    background-size: cover;
    cursor: pointer;
  }
  .module-name {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 17px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
  }
  .subject-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 719px;
    background: #ffffff;
    box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    padding: 25.5px 15px 16px 20px;
  }
}
.subject-weather {
  width: 308px;
  height: 780px;
  margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    @include top;
    .subject-content {
      .tit {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
        .name {
          font-weight: 600;
          font-size: 18px;
          color: #000000;
        }
        .time {
          margin-top: 8px;
          font-weight: 400;
          font-size: 12px;
          color: #999999;
        }
      }
      .detailBox {
        width: 270px;
        min-height: 90px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.08);
        border-radius: 8px 8px 8px 8px;
        padding: 10px;
        margin-bottom: 16px;
        .detailTit {
          height: 42px;
          line-height: 42px;
          border-bottom: 1px solid #f1f2f4;
          font-weight: 600;
          font-size: 16px;
          color: #000000;
          margin-bottom: 10px;
        }
        .detailContent {
          font-weight: 400;
          font-size: 14px;
          line-height: 2;
          color: #333333;
        }
      }
      .disaster {
        width: 270px;
        height: 157px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.08);
        border-radius: 8px 8px 8px 8px;
        padding: 10px;
        margin-bottom: 16px;
        .disasterTit {
          height: 42px;
          line-height: 42px;
          border-bottom: 1px solid #f1f2f4;
          font-weight: 600;
          font-size: 16px;
          color: #000000;
        }
        .disasterContent {
          font-weight: 400;
          font-size: 14px;
          line-height: 2;
          color: #333333;

          .disasterState {
            position: relative;
            .color {
              width: 16px;
              height: 16px;
              display: inline-block;
              background: #00ff5a;
              margin-left: 6px;
              position: absolute;
              top: 50%;
              margin-top: -8px;
            }
          }
        }
      }
      .defense {
        width: 270px;
        height: 157px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.08);
        border-radius: 8px 8px 8px 8px;
        padding: 10px;
        .defenseTit {
          height: 42px;
          line-height: 42px;
          border-bottom: 1px solid #f1f2f4;
          font-weight: 600;
          font-size: 16px;
          color: #000000;
        }
        .defenseContent {
          font-weight: 400;
          font-size: 14px;
          line-height: 2;
          color: #333333;
        }
      }
    }
  }
}
</style>
